@media screen and(min-width:@mobile-device) {
    .my-info-easy {
        padding: @padding-general;
        display: flex;
        width: 100%;
        flex-shrink: 0;
        align-items: center;
        flex-direction: row;
        .avatar {
            width: 150px;
            height: 150px;
        }
        .infobox {
            width: 100%;
            text-align: left;
            padding-left: 20px;
            margin-top: @margin-general;
            flex: 1;
            .username {
                font-size: 30px;
                .text-line-show(1);
                .iconfont {
                    font-size: @big-text;
                    transform: translateY(-10px);
                    margin-left: @margin-general;
                }
            }
            .introuce {
                margin-top: @margin-general;
                font-size:@small-text;
            }
            .more-info {
                i {
                    margin-right: 2px;
                }

                margin-top: @margin-general;
                font-size: @small-text;
                line-height: 30px;
            }
        }
    }
}

@media screen and(min-width:@smallpc-device) {
    .my-info-easy {
        flex-direction: column;
        width: 26%;
        .avatar {
            width: 200px;
            height: 200px;
        }
    }
}